import Taro, { Component } from "@tarojs/taro";
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtIcon,
  AtInput,
  AtTextarea
} from "taro-ui";
import { Button } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { onAddWork,onHideWorkModal,onGetWorks } from "../../actions/workToDo";

@connect(
  state => state,
  { onAddWork,onHideWorkModal ,onGetWorks}
)
class AddMissionModal extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      workName: "",
      workDetails: ""
    };
  }

  onInputNameValue = (key, value) => {
    this.setState({
      [key]: value
    });
  };

  onInputDetail = e => {
    this.setState({
        workDetails: e.target.value
    });
  };

  render() {

    return (
      <AtModal className='add-work-modal' isOpened closeOnClickOverlay={false}>
        <AtModalHeader>
          <AtIcon value='tags' size='30' color='#6190E8' />
          添加待办事项
          <AtIcon value='tags' size='30' color='transparent' />
        </AtModalHeader>
        <AtModalContent>
          <AtInput
            autoFocus
            className='modal-input'
            title='事项名称：'
            value={this.state.workName}
            placeholder='必填'
            onChange={v => {
              this.onInputNameValue("workName", v);
            }}
          />
          <AtTextarea
            value={this.state.workDetails}
            onChange={this.onInputDetail}
            maxLength={200}
            placeholder='具体细节是...'
          />
        </AtModalContent>
        <AtModalAction>
          <Button
            onClick={() => {
              this.props.onHideWorkModal();
              (Taro.atMessage({
                message: "已取消",
                type: "warning",
                duration:3000
              }));
            }}
          >
            取消
          </Button>
          <Button
            onClick={() => {
              this.state.workName
                ? this.props.onAddWork({user:this.props.user.openid,...this.state},()=>{
                  this.props.onGetWorks(this.props.user.openid);
                  Taro.atMessage({
                    message: this.props.user.specialWords.length===0?"添加成功":this.props.user.specialWords[5],
                    info: "success",
                    duration:3000
                  });
                  
                })
                : (Taro.atMessage({
                  message: "请填写事项名称",
                  type: "error",
                  duration:3000
                }));
            }}
          >
            确定
          </Button>
        </AtModalAction>
      </AtModal>
    );
  }
}

export default AddMissionModal;
